<template>
    <div class="user-dialog">
        <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible" width="35%">
            <el-form :model="form" :rules="dataRule" ref="dataForm">
                <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
                    <el-input v-model.number="form.age" type="age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                    <el-select v-model="form.sex" placeholder="请选择性别">
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="护理等级" :label-width="formLabelWidth">
                    <el-select v-model="form.careLevel" placeholder="请选择护理等级">
                        <el-option label="特级护理" value="9"></el-option>
                        <el-option label="一级护理" value="1"></el-option>
                        <el-option label="二级护理" value="2"></el-option>
                        <el-option label="三级护理" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="饮食" :label-width="formLabelWidth">
                    <el-select v-model="form.diet" placeholder="请选择饮食">
                        <el-option label="普食" value="1"></el-option>
                        <el-option label="糖尿病饮食" value="2"></el-option>
                        <el-option label="低盐低脂饮食" value="3"></el-option>
                        <el-option label="流质饮食" value="4"></el-option>
                        <el-option label="禁饮禁食" value="5"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dataFormCancel">取 消</el-button>
                <el-button type="primary" @click="dataFormSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { Dialog, Form, FormItem, Button, Input, Select, Option } from 'element-ui'
import { USER_NAME, USER_AGE } from '@/utils/pattern.js'
export default {
    data () {
        return {
            dialogFormVisible: false,
            formLabelWidth: '4.5rem',
            form: {
                name: '',
                age: '',
                sex: '',
                careLevel: '',
                diet: ''
            },
            dataRule: {
                name: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
                    { pattern: USER_NAME, message: '姓名不支持特殊字符', rigger: 'blur' }
                ],
                age: [
                    { required: true, message: '年龄不能为空', trigger: 'blur' },
                    { type: 'number', message: '年龄必须为数字值', trigger: 'blur' },
                    { pattern: USER_AGE, message: '长度在 1 到 3 个字符', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '性别不能为空', trigger: 'change' }
                ]
            }
        }
    },
    components: {
        ElDialog: Dialog,
        ElForm: Form,
        ElFormItem: FormItem,
        ElButton: Button,
        ElInput: Input,
        ElSelect: Select,
        ElOption: Option 
    },
    methods: {
        showDialog () {
            this.dialogFormVisible = true
        },
        dataFormSubmit () {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    this.$http.post('/zyb/web/v3/updateUserInfo', {
                        real_name: this.form.name,
                        age: this.form.age,
                        sex: this.form.sex,
                        nurse_grade: this.form.careLevel || 0,
                        diet: this.form.diet || 0
                    }).then((res) => {
                        if (res && res.code === 200) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.dialogFormVisible = false
                                    location.reload()
                                }
                            })
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                }
            })
        },
        dataFormCancel () {
            this.dialogFormVisible = false
            this.form = {}
            this.$refs['dataForm'].resetFields()
        }
    }
}
</script>

<style lang="scss" scoped>
.user-dialog {
    text-align: left;
}

</style>